const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanPlugin = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')   // 清除无用的编译信息
const MiniCssExtractPlugin = require('mini-css-extract-plugin')                 // css样式提取
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')   // css压缩（@3.2.0支持v3以下版本，@4.0.0仅支持v4版本及以上）

const Host = 'localhost'
const Port = '8080'

const HtmlPlugin = new HtmlWebpackPlugin({                          // 自定义html模板
    title: 'webpack-test-demo',                                     // html标题
    template: './index.html',                                       // html模板
    filename: 'index.html',                                         // 生成的html的文件名
    inject: 'body'                                                  // 注入js文件到body中
})

const ExtractCSS = new MiniCssExtractPlugin({                       // 提取的css文件
    filename: 'app.[hash].css'
})

const Cssmin = new OptimizeCssAssetsPlugin({                        // css压缩配置
    cssProcessor: require('cssnano'),                               //引入cssnano配置压缩选项
    discardComments: {
        removeAll: true                                             // 移除所有注释
    }
})

const FriendlyErrorsPlugin = new FriendlyErrorsWebpackPlugin({      // 自定义编译输出信息
    compilationSuccessInfo: {
        messages: [`Your application is running here: ${'http'}://${Host}:${Port}`]
    },
    clearConsole: true
})

const config = {
    mode: process.env.NODE_ENV,
    context: path.resolve(__dirname, 'src'),
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'app.[hash].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(css|less)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                loader: 'url-loader',               // 处理css中图片
                options: {
                    limit: 102400,
                    outputPath: './image/',
                    name: '[name].[ext]'
                }
            }
        ]
    },
    plugins: [
        HtmlPlugin,
        new VueLoaderPlugin(),
        Cssmin,
        ExtractCSS,
        FriendlyErrorsPlugin,
        new CleanPlugin()                       // 清空output目录
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: Port,
        quiet: true
    }
}

module.exports = config